<script setup>
import { CloseCircleOutlined } from '@ant-design/icons-vue'
import { boardOpenOrCloseStore, gameStateStore } from '@/stores'
import { ref, watch } from 'vue'
const boardOpenOrCloseStore1 = boardOpenOrCloseStore()
const gameStateStore1 = gameStateStore()
const handleClickCloseFn = () => {
  boardOpenOrCloseStore1.changeSpeedBoard(false)
}
const checked = ref()
checked.value = gameStateStore1.speed === 1 ? true : false
watch(checked, (newV) => {
  //超难时为true
  console.log('切换难度')
  newV ? gameStateStore1.changeSpeed(1) : gameStateStore1.changeSpeed(2)
})
</script>
<template>
  <div class="speed-page">
    <div class="speed-box">
      <div class="title">
        设置
        <div class="close" @click="handleClickCloseFn"><CloseCircleOutlined /></div>
      </div>
      <div class="content">
        <span style="padding-right: 10px">简易程度：</span
        ><a-switch v-model:checked="checked" checked-children="超难" un-checked-children="简单" />
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.speed-page {
  position: fixed;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  .speed-box {
    width: 500px;
    height: 300px;
    background: url('./../../../assets/board.jpg') no-repeat center center;
    background-size: 100% 100%;

    .title {
      position: relative;
      text-align: center;
      padding: 20px 0;
      border-bottom: 5px rgb(187, 121, 60) solid;
      font-size: 40px;
      .close {
        position: absolute;
        right: 10px;
        top: 5px;
      }
    }
    .content {
      padding: 30px;
      font-size: 30px;
    }
  }
}
</style>
